<template>
  <el-container>
    <!--  side自适应宽度  -->
    <el-aside width="auto">
      <LayoutMenu :is-menu-collapse="isMenuCollapse"></LayoutMenu>
    </el-aside>
    <el-container>
      <el-header>
        <i :class="getMenuCollapse" @click="handleCollapse"></i>
        <el-dropdown>
            <span class="el-dropdown-link">
                <el-avatar style="float: left"> {{userInfo.username}} </el-avatar>
                <i class="el-icon-arrow-down el-icon--right" style="padding-top: 20px"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="personal">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-tabs v-model="$store.state.maintabs.activeRoute"
                 type="border-card" closable
                 @tab-click="clickTab"
                 @tab-remove="removeTab">
          <el-tab-pane v-for="item in $store.state.maintabs.tabs"
                       :key="item.route" :label="item.name"
                       :name="item.route" :closable="item.closable">
          </el-tab-pane>
        </el-tabs>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
import LayoutMenu from "@/views/layout/LayoutMenu";
import {logout} from "@/api/system";
import store from '@/store/index'
import {Message} from 'element-ui'
export default {
  name: 'Home',
  components: {
    LayoutMenu
  },
  beforeRouteEnter (to,from,next) {
    if (store.state.user.isGetInfo){
      next()
    }else {
      console.log('Home:beforeRouteEnter:GetUserInfo')
      store.dispatch('GetUserInfo').then(res=>{
        next(vm =>vm.setUserInfo(res) )
      }).catch(err=>{
        Message({'message':'用户信息加载失败,因为'+err.message,type:'error'})
      })
    }

  },
  data(){
    return {
      isMenuCollapse: false,
      userInfo:{}
    }
  },
  methods:{
    setUserInfo(res){
      if (res.result){
        this.userInfo = res.data
      }

    },
    handleCollapse(){
      this.isMenuCollapse = !this.isMenuCollapse
    },
    clickTab(tab){
      if(this.$route.path!==tab.$options.propsData.name){
        this.$router.push(tab.$options.propsData.name)
      }
    },
    removeTab(targetName){
      if(targetName !== "/home/first"){
        this.$store.commit('removeTab', targetName);
        let redirect = this.$store.state.maintabs.tabs[this.$store.state.maintabs.tabs.length-1].route
        if (this.$route.path !== redirect){
          this.$router.push(redirect)
        }
      }
    },
    personal(){
      if(this.$route.path!=='/home/personal'){
        this.$router.push('/home/personal')
      }
    },
    logout(){
      logout().then(()=>{
          this.$router.push("/");  //跳转到登录界面
          sessionStorage.clear() //sessionStorage数据清理
      }).catch(err =>{
        console.log(err)
        // this.$message.error(`登出失败,${err.message}`)
      })
    }
  },
  computed:{
    getMenuCollapse(){
      return {
        "el-icon-s-fold":!this.isMenuCollapse,
        "el-icon-s-unfold":this.isMenuCollapse
      }
    }
  }
}
</script>

<style lang="less">
#app > .el-container{
  padding: 0;
  margin: 0;
  height: 100%;
}
.el-header {
  background-color: #1F9FFF;
  .el-icon-s-fold,.el-icon-s-unfold{
    font-size:32px;
    line-height:60px;
  }
  .el-dropdown{
    float: right;
    //下面是---垂直居中---
    position:relative;
    top: 50%;
    /* 垂直向上偏移自身50%的高度 */
    transform: translateY(-50%);
  }
  .el-avatar{
    color: black;
    background-color: white;
  }
}
.el-aside {
  background-color: #FFFFFF;
  text-align: left;
}
.el-main {
  padding-top: 0;
  background-color: #E9EEF3;
  text-align: center;
}
//不显示tab-content，内容区域我们使用router-view自己定义过
.el-tabs--border-card>.el-tabs__content {
  padding: 0;
}
</style>
